<template>
	<view class="fast-page">
		<view class="item" v-for="(item, index) in results" :key="index" @click="handleChange(index)">
			<view class="item-l">
				<image :src="item.icon" mode="widthFix"></image>
				<text>{{item.title}}</text>
			</view>
			<image :src="item.checked ? '/static/radio_a.png' : '/static/radio.png'" mode="widthFix" class="item-r"></image>
		</view>
		<view class="fixed-btn">
			<view class="btn-l" @click="init(true)">
				<image src="/static/icon8.png" mode="widthFix"></image>
				<text>重置快捷</text>
			</view>
			<view class="btn-l" @click="fast">
				<image src="/static/radio_a.png" mode="widthFix"></image>
				<text>确认设置</text>
			</view>
		</view>
	</view>
</template>

<script>
	import lists from '../../application/allNav.js'
	export default{
		data() {
			return {
				results: []
			}
		},
		computed: {
			checkedLists() {
				const checkArr = []
				this.results.forEach((item, index) => {
					if(item.checked) {
						checkArr.push(item)
					}
				})
				return checkArr
			}
		},
		onLoad() {
			if(uni.getStorageSync('fastArr')) {
				let arr = []
				lists.forEach((item, index) => {
					arr = [...arr, ...item.children]
				})
				const fastArr = uni.getStorageSync('fastArr')
				arr.forEach(arrItem => {
					fastArr.forEach(fastItem => {
						if(arrItem.title == fastItem.title) {
							arrItem.checked = true
						}
					})
				})
				this.results = arr
			}else{
				this.init()
			}
		},
		methods: {
			init(bool) {
				let arr = []
				lists.forEach((item, index) => {
					arr = [...arr, ...item.children]
				})
				arr.forEach((arrItem, index) => {
					arrItem.checked = index < 8 ? true : false
				})
				this.results = arr
				if(bool) {
					uni.showToast({
						title: '重置成功',
						icon: 'none'
					})
				}
			},
			handleChange(index) {
				const isBool = !this.results[index].checked
				console.log(isBool)
				if(this.checkedLists.length === 8 && isBool) {
					uni.showToast({
						title: '最多只能设置8个',
						icon: 'none'
					})
					return;
				}
				this.$set(this.results[index], 'checked', isBool)
			},
			fast() {
				uni.setStorageSync('fastArr', this.checkedLists)
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style scoped>
	.fast-page{
		padding: 0 36rpx;
	}
	.item{
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E9E9E9;
	}
	.item-l{
		display: flex;
		align-items: center;
	}
	.item-l image{
		width: 40rpx;
		margin-right: 20rpx;
	}
	.item-r{
		width: 40rpx;
	}
	.fixed-btn{
		position: fixed;
		left: 50%;
		bottom: 36rpx;
		transform: translateX(-50%);
		width: 510rpx;
		height: 110rpx;
		background-image: url(@/static/bg.png);
		background-size: 100% 100%;
		z-index: 2;
		display: flex;
		align-items: center;
	}
	.fixed-btn view{
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fixed-btn image{
		width: 40rpx;
		margin-right: 12rpx;
	}
</style>
